import React, {useEffect, useState} from 'react';
import {Layout, Button, Space, Select, Row, Col, Switch, Divider, message, Modal, Empty, Spin} from 'antd';
import style from './index.less';
import AddChart from './compoents/AddChart';
import ChartContainer from  './compoents/ChartContainer'
import {ExclamationCircleOutlined, ExpandAltOutlined, PlusOutlined, SyncOutlined} from "@ant-design/icons/lib";
import { DaysRange ,Fullscreen} from '@alitajs/antd-plus';
import DashboardName from './compoents/DashboardName'
import { useRequest, request } from 'umi';
import moment from 'moment';


const { Content} = Layout;
const {Option} = Select;
const { confirm } = Modal;

export default ()=> {
  const [currDashBoard,setCurrDashBoard] = useState({key: 0,label: '选择大盘', value: 0})
  const [autoRefresh,setAutoRefresh] = useState(false)
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');
  const [fullScreenStatus, setFullScreenStatus] = useState(false);

  const list =  useRequest('/api/dashboard/list');
  function showDeleteConfirm() {
    console.log(currDashBoard)
    if (currDashBoard?.value === 0){
      message.error('检查当前大盘')
    }else {
      confirm({
        title: '确认删除当前数据大盘么 ?',
        icon: <ExclamationCircleOutlined />,
        content: '当前大盘下设置的图表会一并删除',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          request('/api/dashboard/del',{
            params: {
              id: currDashBoard?.value,
            },
            skipErrorHandler: true,
          }).then(data => {
            list.run().then( () => {
              setCurrDashBoard({key: 0,label: '选择大盘', value: 0})
            });
           return message.success(data.message)
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });

    }

  }

// 监听页面全屏事件
  window.onresize = () => {
    setFullScreenStatus(document.fullscreenElement)
  }

  function updateCurDashboardHandle(value: number,label: string) {
    setCurrDashBoard({key: value,label, value})
    setAutoRefresh(false)
  }

  return(
      <Layout>

        <Content>
          <div style={{ background: '#fff', padding: 10, minHeight: 800 }}>
              <Row justify="space-around" align="top">
                <Col className="gutter-row" span={9}>
                  <div className={ style.select_container }>
                    <label>当前大盘：</label>
                    <Select
                      style={{ width: 200,paddingTop: 8 }}
                      showSearch
                      labelInValue
                      value={currDashBoard}
                      placeholder="选择大盘"
                      onChange={(item: any) => {
                        setCurrDashBoard(item)
                        setAutoRefresh(fullScreenStatus)
                      }}

                    >

                      {
                        list?.data?.map( (item: any) => (
                          <Option key={item.id} value={item.id}>{item.label}</Option>
                        ))

                      }
                    </Select>

                    {
                      currDashBoard?.value !== 0 ? <DashboardName
                          curDashboard={currDashBoard}
                          toRefreshDashboardNameList={ list.run }
                          updateCurDashboardName={ ( value: any,label: any ) => { updateCurDashboardHandle(value,label) } }
                          trigger={ (<a
                            className={ style.modifyDashboardName }

                          > 修改</a>)}
                          name="修改大盘名称"/>
                        :
                        null
                    }


                  </div>



                </Col>
                <Col className={style.p_top_8} span={6} xs={0} lg={6} sm={6}>
                  <Space>
                    <DashboardName
                      toRefreshDashboardNameList={ list.run }
                      updateCurDashboardName={ ( value: any,label: any ) => { updateCurDashboardHandle(value,label) } }
                      trigger={ (<Button type="primary">
                        <PlusOutlined />
                        创建大盘
                      </Button>)}
                      name="创建大盘"/>
                    <Button  onClick={showDeleteConfirm}>删除当前大盘</Button>
                  </Space>
                </Col>
                <Col span={4} className={ style }>
                  <Row className={style.version_tip}><Col span={24}>当前版本v1.0：试用版本</Col></Row>
                  <Row className={style.version_tip}><Col span={24}>升级版本，获得更多配额和功能</Col></Row>
                </Col>
              </Row>
              <Divider />
              <Row gutter={[16, 24]}>
                <Col span={16}>
                  <Row>
                    <Col span={19}>
                      <DaysRange
                        marks={[1, 30, 7]}
                        onChange={(data) => {
                          setStartTime(moment(data?.startTime).format('YYYY-MM-DD HH:mm:ss'))
                          setEndTime(moment(data?.endTime).format('YYYY-MM-DD HH:mm:ss'))
                        }}
                      />
                    </Col>
                    <Col span={5}>实时分析：<Switch checked={ autoRefresh } onChange={(item) => {
                      currDashBoard.value === 0 ? message.error('请检查当前大盘') : setAutoRefresh(item);
                    }}/>
                    </Col>
                  </Row>

                </Col>
                <Col span={8} className="gutter-row" xs={0} lg={6} sm={6}>
                  <Space>

                    {/*添加图表*/}
                    <AddChart
                      name='添加图表'
                      updateChartContain= { () => { setAutoRefresh(!autoRefresh) } }
                      toDashboardId={ currDashBoard.value } />
                    <Button icon={<ExpandAltOutlined />} onClick={()=>{setFullScreenStatus(true)}}>全屏</Button>
                    <Button icon={<SyncOutlined />} onClick={()=>{
                      currDashBoard.value > 0 ? setAutoRefresh(!autoRefresh) : message.error('请检查当前大盘')
                    }}>刷新</Button>
                  </Space>
                </Col>
              </Row>


            {/*图表展示区域*/}

            {
              currDashBoard.value > 0 ? (
                  <Fullscreen enabled={fullScreenStatus}>
                    <div style={{ display: fullScreenStatus? "block" : "none" }}>
                      <button onClick={()=>{setFullScreenStatus(false)}}>退出全屏</button>
                      <h2 style={{ color: "wheat",width: '100%',textAlign: 'center' }}>智能SPC系统</h2>
                    </div>
                    <ChartContainer
                      currDashBoardId ={ currDashBoard.value }
                      startTime = { startTime }
                      endTime = { endTime }
                      autoRefresh = { autoRefresh }
                      style={{ width: '100%', height: '100%' }}
                    />
                  </Fullscreen>

              ) : (

              <Empty
                style={{ marginTop: 100 }}>
              </Empty>

              )
            }
          </div>
        </Content>
      </Layout>
    )
}
